<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>德德后台管理系统</title>
  <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">

  <style>
    .c-gray {
      color: #ccc;
    }

    .c-green {
      color: green;
    }

    .c-red {
      color: red;
    }

    .photo {
      width: 300px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .photo img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    /* #nprogress .bar {
      background-color: red;
    } */
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 引入公共页面 -->
    {{include'./Public_documents/header.html'}}

    <!-- 左侧 -->
    {{include'./Public_documents/Left_menu.html'}}

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <span class="layui-breadcrumb" lay-separator="/">
          <a href="/">首页</a>
          <a href="/article">分类列表</a>
        </span>
        <div style="text-align:center;padding:30px;">
        </div>
        <div>
          <table align="center" width="1300px" border="1px" rules="all" class="layui-table">
            <thead>
              <tr>
                <td>序号</td>
                <td width="200px">分类名</td>
                <td>是否显示前台</td>
                <td>添加时间</td>
               
                <td>操作</td>

              </tr>
            </thead>
            <tbody id="tbody">

            </tbody>

          </table>
        </div>
      </div>
    </div>

  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="/layui-v2.6.8/layui/layui.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>

  <script>
    // 修改默认位置
    NProgress.configure({  showSpinner: true,});
    // 页面加载完毕，需要获取分类数据
    $(function () {
      // 加载分类
      loadCate();
    })

    const isShowTextMap = {
      0: "<span style='color:gray'>不显示</span>",
      1: "<span style='color:green'>显示</span>",
    }

    function loadCate() {
      NProgress.start(); // 开启进度条 ==  NProgress.set(0)

      $.get("/getCateData", function (res) {
        NProgress.done(); // 关闭进度条
        // 动态构造tr标签
        let tbodyHtml = '';
        res.forEach((cate, index) => {
          
          let { id, name, Show_timeornot, Add_time} = cate;
          Show_timeornot = isShowTextMap[Show_timeornot];
          tbodyHtml += `<tr>
                <td>${index + 1}</td>
                <td width="200px">${name}</td>
                <td>${Show_timeornot}</td>
                <td>${Add_time}</td>
                
                <td>
                  <button type="button" data-catid='${id}'  class="layui-btn  layui-btn-sm  edit">编辑 <i class="layui-icon">&#xe642;</i></button>
                  <button type="button" data-catid='${id}' class="layui-btn  layui-btn-sm  layui-btn-danger delete">删除  <i class="layui-icon">&#xe640;</i></button>
                </td>
          </tr>`
          // 塞到tbody中
          $("#tbody").html(tbodyHtml)
        })
      }, 'json')
    }

    // 删除操作(对于动态新增的元素绑定事件需要用事件委托（代理）)
    $("tbody").on('click', '.delete', function () {

      //询问框
      let _that = this
      layer.confirm('确认删除吗', {
        btn: ['是的', '取消'] //按钮
      }, function () {
        // 获取当前要删除的分类的id
        let id = $(_that).attr('data-catid')
        $.post('/deleteCate', { id }, function (res) {
          // console.log({ id })
          let { message, code } = res
          layer.msg(message)
          if (code === 20000) {
            console.log('成功');
            // 重新加载分类
            loadCate();
          }
        }, 'json')
      }, function () {

      });

    })
    //事件委托
    $("tbody").on('click','.edit',function(){
      // console.log(this)
      let id= $(this).attr('data-catid')
      // console.log(id)
      location.href = "/editCate?id=" + id;
    })
  </script>

</body>

</html>